<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4526978_kz9jlp8j66.css">
  <link rel="stylesheet" href="../public/css/reset.css">
  <link rel="stylesheet" href="./index.css">
</head>
<body>

  <div class="container">
    <div class="cover">
      <img src="../public/images/bg.jpg" alt="" >
    </div>
    <div class="music-content">
      <div class="info">
        <span class="title">偏爱</span>
        <span class="singer">张芸京</span>
      </div>
      <div class="volume-box">
        <span class="volume-down"><i class="iconfont icon-jianhao1"></i></span>
        <input type="range" name="" id="" class="volume-range" step="1" min="0" max="100" value="80" oninput="musicEl.volume = this.value / 100">
        <span class="volume-up"><i class="iconfont icon-jiahao1"></i></span>
      </div>
      <div class="btn-box">
        <i class="iconfont icon-a-27Gxunhuanbofang repeat" onclick="handleRepeat()"></i>
        <i class="iconfont icon-aixin favourte" onclick="handleFavourite()"></i>
        <i class="iconfont icon-yinliang-F volume" onclick="handleVolume()"></i>
      </div>
      <div class="music-box">
        <span class="time current-time">00:00</span>
        <input type="range" name="" id="" class="seekbar" step="1" min="0" max="100" value="0" oninput="handleSeekBar()">
        <audio class="music-element">
          <source src="../public/music/张芸京 - 偏爱 .mp3">
        </audio>
        <span class="time duration">00:00</span>
      </div>
      <span class="play" onclick="handlePlay()">
        <i class="iconfont icon-bofang2"></i>
      </span>
    </div>
  </div>
  <script src="./index.js"></script>
</body>
</html>
